<template>
    <div class="locationMap">
        <cjcNav title="地图" @customRouter="customRouter"></cjcNav>
        <div class="map" ref="map">
            <amap @myamap="myamap" :markContent="markContent" :zoom="zoom" :center="center" :markPosition="markPosition"/>
        </div>
        <div class="foot" ref="foot">
            <div class="detailPosition xl">
                <div class="line"></div>
                <span v-if="$store.state.checkInSchool.msg !== '缺失关键信息！'">{{$store.state.checkInSchool.result.CHECK_MSG}}</span>
                <span v-if="$store.state.checkInSchool.msg === '缺失关键信息！'">未在打卡校区</span>
            </div>
            <div class="currentPosition">当前位置: {{$store.state.address}}</div>
            <div class="btn-location">
                <Button class="loc" type="ghost" @click="relocation">重新定位</Button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {
        cjcNav: () => import('@/components/common/Nav.vue'),
        amap: () => import('@/components/amap/amap.vue')
    },
    data() {
        return {
            map: null,
            marker: null,
            markContent: '',
            center: [this.$store.state.getLonitude, this.$store.state.getLatitude],
            markPosition: [this.$store.state.getLonitude, this.$store.state.getLatitude],
            zoom: 16,
            locationing: false,
        }
    },
    methods: {
        // 初始获得地图对象
        myamap(map, marker) {
            this.map = map
            this.marker = marker
        },
        // 设置地图中心点位置
        panTo(lnobj) {
            this.map.panTo([lnobj.LONGITUDE, lnobj.LATITUDE])
        },
        // 设置标记位置
        setPosition(lnobj) {
            this.marker.setPosition([lnobj.LONGITUDE, lnobj.LATITUDE])
        },
        // 获取是否在校内打卡
        async setGetInSchool() {
            let getInSchool = await this.$store.dispatch('getCheckInSchool', {
                user_id: this.$store.state.userInfo.USER_ID,
                plan_id: this.$store.state.NextPlan.PLAN_ID,
                latitude: this.$store.state.getLatitude,
                longitude: this.$store.state.getLonitude,
            })
            if (getInSchool.data.status === 0) {
                this.$store.commit('SET_checkInSchool', getInSchool.data)
            } else if (getInSchool.data.status === 1) {
                this.$store.commit('SET_checkInSchool', getInSchool.data)
            }
        },
        // 重新定位
        relocation() {
            const Vm = this
            if (!this.locationing) {
                const msg = this.$Message.loading({
                    content: '定位中...',
                    duration: 0,
                    closable: true
                })
                this.locationing = true
                this.$cjc.apiDeviceGetGPS({
                    success(data) {
                        msg()
                        setTimeout(function() {
                            Vm.locationing = false
                        }, 1000)
                        Vm.panTo(data.result)
                        Vm.setPosition(data.result)
                        Vm.regeocoder(data.result)
                        // 设置地址并判断校内校外
                        Vm.$store.commit('SET_AddLA', data.result.LATITUDE)
                        Vm.$store.commit('SET_AddLO', data.result.LONGITUDE)
                        Vm.setGetInSchool()
                    },
                    fail(data) {
                        msg()
                        setTimeout(function() {
                            Vm.locationing = false
                        }, 1000)
                        Vm.$Message.error('定位失败，请检查您的网络是否正常')
                        console.log(data.msg)
                    }
                })
            }
        },
        /* eslint-disable no-undef */
        regeocoder(lnobj) {
            const Vm = this
            AMap.service('AMap.Geocoder', () => {
                let geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: 'base'
                })
                geocoder.getAddress([lnobj.LONGITUDE, lnobj.LATITUDE], function(status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        Vm.geocoder_CallBack(result)
                    }
                })
            })
        },
        geocoder_CallBack(data) {
            let address = data.regeocode.formattedAddress // 返回地址描述
            this.$store.commit('SET_address', address)
        },
        customRouter() {
            this.$router.push({
                name: 'punchCard'
            })
        }
    },
    created() {
        setTimeout(() => {
            this.$refs.map.style.height = window.screen.height * 0.7 - 50 + 'px'
            this.$refs.foot.style.height = window.screen.height - (window.screen.height * 0.7) + 'px'
        }, 0)
    }
}
</script>

<style lang="less">
@BZXQcolor: #5e97f6;
@HQZcolor: #f8ba68;
@XLcolor: #25cca0;
    .locationMap{
        background-color: #fff;
        .amap-logo,.amap-copyright{
            display: none !important;
        }
        .base-text{
            text-align: center;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
        }
        .foot{
            overflow: hidden;
        }
        .currentPosition{
            margin-top: 20px;
            .base-text
        }
        .detailPosition{
            .base-text;
            padding-top: 10px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            height: 60px;
            line-height: 50px;
            color: #fff;
            &.xl {
                background-color: @XLcolor;
            }
            &.hqz {
                background-color: @HQZcolor;
            }
            &.xw {
                background-color: @BZXQcolor;
            }
            .line{
                width: 35px;
                height: 4px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                background-color: #fff;
                margin: 0 auto;
            }
        }
        .btn-location{
            margin-top: 20px;
            text-align: center;
            .loc {
                border-top-left-radius: 50px;
                border-top-right-radius: 50px;
                border-bottom-left-radius: 50px;
                border-bottom-right-radius: 50px;
                width: 150px;
                color: #0093dd;
                // font-size: 14px;
            }
        }
    }
</style>
